<!--<html lang="en" xmlns:th="http://www.thymeleaf.org"       xmlns="http://www.w3.org/1999/xhtml">-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!--    <link href="../static/css/uploadifive.css" rel="stylesheet" type="text/css" />-->

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
    <title>文件下载上传系统首页</title>
    <!--    <link rel="icon" href="./favicon.ico" type="image/x-icon">-->
    <!--    <link rel="stylesheet" href="css/viewer.min.css"/>-->
    <!--    <link rel="stylesheet" href="css/loading.css"/>-->
    <!--    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>-->
    <!--    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/>-->
    <!--    <link rel="stylesheet" href="gitalk/gitalk.css"/>-->
    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <!--    <script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>-->
    <!--    <script type="text/javascript" src="gitalk/gitalk.min.js"></script>-->
    <script type="text/javascript" src="js/base64.min.js"></script>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="./bootstrap/css/bootstrap/bootstrap.css"/>
    <link rel="stylesheet" href="./bootstrap-table/bootstrap-table.css"/>
    <link rel="stylesheet" href="./bootstrap-table/bootstrap-table-pagejump.css"/>
    <link rel="stylesheet" href="./message/message.css"/>
    <script src="./jquery/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.js"></script>
    <script src="./bootstrap-table/bootstrap-table.js"></script>
    <script src="./bootstrap-table/bootstrap-table-export.js"></script>
    <script type="text/javascript" src="./bootstrap-table/bootstrap-table-pagejump.js"></script>
    <script src="./extends/tableExport/jquery.base64.js"></script>
    <script src="./extends/tableExport/tableExport.js"></script>
    <script src="./message/message.main.js"></script>
    <script src="./js/indexFile/indexTable.js"></script>
    <link rel="stylesheet" href="./css/logding.css"/>

    <style>

        .form-check{
            margin-left: 12px;
        }
        .alert-dismissible .close{
            right: 0px !important;
        }
        header {
            width: 100%;
            background-color: #FFFFFF;
            position: fixed;
            top: 0;
            z-index: 1000;
            border-bottom: #eeeeee solid;
            height: 15%;
        }
        .col-md-2{
            margin-top: 0.6% !important;
        }
        .row{
            margin-left:15px !important;
        }

    </style>
</head>

<body>
<header>
    <div class="row">

        <div class="col-md-2" >
            <!--文件上传-->
            <form action="/api/uploadFile" method="post" enctype="multipart/form-data">

                <div class="form-group">
                    <input type="file" id="file" name="file" multiple="true">
                </div>
                <button type="button" class="btn btn-default" onclick="onUpload()">上传文件</button>
                <input type="button" value="下载批量文件" onclick="onDownload()" class="btn btn-success" />
            </form>
        </div>

    </div>
</header>



<div id="content">
    <div id="content-body">
        <div id="reportTableDiv" class="span10">
            <table id="reportTable">
            </table>
        </div>
    </div>
</div>



<div id="content1" style="margin-top: 8%">
    <div id="content-body1">
        <div id="reportTableDiv1" class="span10">
            <table id="reportTable1">
            </table>
        </div>
    </div>
</div>

<div id="content2">
    <div id="content-body2">
        <div id="reportTableDiv2" class="span10">
            <table id="reportTable2">
            </table>
        </div>
    </div>
</div>

<div id="content3">
    <div id="content-body3">
        <div id="reportTableDiv3" class="span10">
            <table id="reportTable3">
            </table>
        </div>
    </div>
</div>

<div id="content4">
    <div id="content-body4">
        <div id="reportTableDiv4" class="span10">
            <table id="reportTable4">
            </table>
        </div>
    </div>
</div>

<div id="content5">
    <div id="content-body5">
        <div id="reportTableDiv5" class="span10">
            <table id="reportTable5">
            </table>
        </div>
    </div>
</div>

<div id="content6">
    <div id="content-body6">
        <div id="reportTableDiv6" class="span10">
            <table id="reportTable6">
            </table>
        </div>
    </div>
</div>

<div id="content7">
    <div id="content-body7">
        <div id="reportTableDiv7" class="span10">
            <table id="reportTable7">
            </table>
        </div>
    </div>
</div>

<div id="content8">
    <div id="content-body8">
        <div id="reportTableDiv8" class="span10">
            <table id="reportTable8">
            </table>
        </div>
    </div>
</div>

<div id="content9">
    <div id="content-body9">
        <div id="reportTableDiv9" class="span10">
            <table id="reportTable9">
            </table>
        </div>
    </div>
</div>

<div id="content10">
    <div id="content-body10">
        <div id="reportTableDiv10" class="span10">
            <table id="reportTable10">
            </table>
        </div>
    </div>
</div>

<div id="content11">
    <div id="content-body11">
        <div id="reportTableDiv11" class="span10">
            <table id="reportTable11">
            </table>
        </div>
    </div>
</div>

<div id="content12">
    <div id="content-body12">
        <div id="reportTableDiv12" class="span10">
            <table id="reportTable12">
            </table>
        </div>
    </div>
</div>



<!-- 模态框  -->
<div class="modal" tabindex="-1" id="example" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">上传文件
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button></h5>
            </div>
            <div class="modal-body">

                <h5><b>选择文件夹或自定义文件夹名称</b></h5>
                <div id="upload_check"></div>
                <div class="input-group">
                        <span class="input-group-addon">
                            <input type="radio" name="optradio">
                        </span>
                    <input type="text" id="radioVal" class="form-control">
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="onUploadFile()">文件上传</button>
            </div>
        </div>
    </div>
</div>


<div class="modal" tabindex="-1" id="upLogding" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">上传中</h5>
            </div>
            <div class="modal-body">
                <div class="loadEffect">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>


            </div>

        </div>
    </div>
</div>


<script type="text/javascript" th:inline="javascript">

    var lists;
    var fileNames = []; // 文件夹列表
    var fileData = [];  //勾选的数据
    var fileArr = [];
    var fileIndex = '';     //表的位置
    var fileSourcePk = ''; // 编号
    var fileTableName = ''; // 表名
    let pageSizeFile = 10; // 默认条数
    let filePathName = ''; //选中文件夹名称
   // 预览文件URL
   //  let showFileUrl = "http://127.0.0.1:8080/demo/";
   //  // 下载URL
   //  let dowFileUrl = "http://localhost:8080/api/";
   //  // 预览查看文件URL
   //  let previewShowFileUrl = "http://127.0.0.1:8012/onlinePreview";

    // 部署
    let showFileUrl = "http://172.16.0.131:8081/demo/";
    let dowFileUrl = "http://172.16.0.131:8081/api/";
    let previewShowFileUrl = "http://172.16.0.131:8012/onlinePreview";

    $(function () {
        let tableNames = getTableNames();
        let table_name = getTable_name();
        fileName();
        fileList(getRequest()['source_pk'],table_name[tableNames.indexOf(getRequest()['table_name'])],filePathName,true);
        $.ajax({
            url:'/api/selectAllTable',
            type:'POST',
            success : function(data) {
                if(data){
                    lists = data;
                    load(getRequest()['table_name'],getRequest()['source_pk']);
                }else{
                    alert("查询失败");
                }
            }
        });
    })

    // 文件夹列表
    function fileName() {
        $.ajax({
            url: "/api/fileName",
            type: "get",
            data:{"tableName":getRequest()['table_name']},
            dataType: "json",
            success: function (res) {
                fileNames = res;
            }
        })
    }
    // 查看文件数据
    function fileList(sourcePk,tableName,filePathName,flag) {

        $.ajax({
            url: "/api/selectAll",
            type: "get",
            data:{"sourcePk":sourcePk,"tableName":tableName,"filePathName":filePathName,"tableFileName":getRequest()['table_name']},
            // dataType: "json",
            success: function (res) {
                var q = jQuery.parseJSON(res);
                fileData = q;
                if(flag) {
                    fileArr = q;
                }

            },
            error:function (){
                Qmsg.error({
                    content:"错误！",
                    timeout:5000
                })
            }
        })
    }
    //  查看文件列表
    function onShowFile(sourcePk,tableName,index) {
        fileIndex = index;
        fileSourcePk = sourcePk;
        fileTableName = tableName;
        $('#whiteContent').modal('show')
        showFileData(sourcePk,tableName,index);
        fileList(sourcePk,tableName,filePathName);
        $("#selectLeo").html("");
        var str = "<option value='-1' disabled selected hidden>请选择文件夹名称</option>";
        str += "<option value='' >全部文件夹</option>";
        for (var i=0;i<fileNames.length;i++){
            str += "<option value='"+fileNames[i]+"'>"+fileNames[i]+"</option>"
        }
        $("#selectLeo").append(str);
    }
    // 文件列表数据
    function showFileData(sourcePk,tableName,index) {

        // 销毁bootstrapTable
        $('#reportTable13').bootstrapTable('destroy');
        // 初始化bootstrapTable
        $('#reportTable13').bootstrapTable({
            url: "api/selectAll?sourcePk="+sourcePk+"&tableName="+tableName+"&filePathName="+filePathName+"&tableFileName="+getRequest()['table_name'],
            method: 'get',
            cache: false,
            height: 500,
            striped: true,
            pagination: true,
            pageSize: pageSizeFile,
            pageNumber: 1,
            pageList: [10, 20, 50, 100, 200, 500],
            search: false,
            showColumns: false,
            sortable: false,
            showRefresh: false,
            showExport: false,
            exportTypes: ['csv', 'txt', 'xml'],
            search:true,
            trimOnSearch:true,
            // clickToSelect: true,
            columns: [
                {
                    checkbox: true,
                    // formatter: function (value, item, i) {
                    //     if(checkArrs[index] != undefined && checkArrs.length > 0 && checkArrs[index].indexOf(item.id) > -1){
                    //         return { checked : true}
                    //     }
                    //     return { checked : false}
                    // }
                    formatter: function (value, item, i) {
                        if(checkArrs[index] != undefined && checkArrs.length > 0 ){

                            return { checked : true}
                        }
                        return { checked : false}
                    }
                },
                {
                    field: "id",
                    title: "id",
                    align: "center",
                    visible: false,
                    sortable: "false",
                },{
                    field: "tableName",
                    title: "表名",
                    align: "center",
                    visible: false,
                    sortable: "false",
                },{
                    field: "filePath",
                    title: "文件夹路径",
                    formatter: function (value, item, index) {
                        var str = value.split("/");

                        return str[str.length-2];
                    },
                    align: "center",
                    valign: "middle",
                    sortable: "true"
                }, {
                    field: "fileName",
                    title: "文件名称",
                    align: "center",
                    valign: "middle",
                    sortable: "true"

                }, {
                    title: "操作",
                    field: "comment",
                    width: '150px',
                    align: "center",
                    events: "operateEvents",
                    formatter: function (value, row, index) {//value：表示当前单元格中的值,row：表示当前行,index：表示当前行的下标
                        return [
                            '<button id="id_row_download" type="button" onclick="showPreview(\'' + row.filePath + '\',\'' +row.nickname+ '\',\'' +row.fileName + '\',\'' +row.fileSuffix + '\')" class="btn btn-info" singleSelected=true>预览</button>    ',
                            '<button  type="button" onclick="onDownloadFile(\'' +row.id + '\')" class="btn btn-primary" singleSelected=true>下载</button> ',
                            '<button  type="button" onclick="deleteFile(\'' +row.id + '\')" class="btn btn-danger" singleSelected=true>删除</button>'

                            // '<button id="id_row_yulan" type="button" class="btn btn-warning" singleSelected=true>预览</button>',
                        ].join('');
                    }
                }
            ],
            data: [],
            onPageChange: function (size, number) {
            },
            // 单选勾选
            onCheck:function(row){
                tableCheck(index,row);
            },
            // 全选回调事件
            onCheckAll: function (row) {
                tableCheck(index);
            },
            // 取消单选事件
            onUncheck:function(row){
                closeTableCheck(index,row);
            },
            // 取消全选事件
            onUncheckAll:function(row){
                closeTableCheck(index,null);
            },
            formatNoMatches: function () {
                return '无符合条件的记录';
            }
        });
        setSelPageSizeDomFile();


    }
    function setSelPageSizeDomFile () {
        $("#showTableFile").children(".clearfix").find(".page-list").remove();

        let strHtml = `<span class="page-list" style="margin-top: 12px;line-height: 50px;margin-left: 30px">每页显示
        					<select id="selPageSizeFile" style="border: 1px solid #cccccc; border-radius: 4px; padding: 4px 10px">
					            <option value="5" ${pageSizeFile == 5 ? 'selected' : ''}>5</option>
					            <option value="10" ${pageSizeFile == 10 ? 'selected' : ''}>10</option>
					            <option value="15" ${pageSizeFile == 15 ? 'selected' : ''}>15</option>
					            <option value="30" ${pageSizeFile == 30 ? 'selected' : ''}>30</option>
					            <option value="50" ${pageSizeFile == 50 ? 'selected' : ''}>50</option>
					            <option value="100" ${pageSizeFile == 100 ? 'selected' : ''}>100</option>
				        	</select> 条记录
		        		<span>`
        $("#showTableFile").children(".clearfix").append(strHtml);

    }

    $(document).on("change", '#selPageSizeFile', () => { // 下拉选择每页数目促发事件
        pageSizeFile = $("#selPageSizeFile").val();
        showFileData(fileSourcePk,fileTableName,fileIndex)
    })

    var checkArrs = [];
    // 存勾选中的数据
    function  tableCheck(index) {
        let reportTable = $("#reportTable13").bootstrapTable('getSelections');
        if(reportTable.length > 0){

            var arr = [];
            for(let i in reportTable){
                if(checkArrs[index] == undefined ){
                    arr.push(reportTable[i].id);
                }else {
                    checkArrs[index].push(reportTable[i].id);
                }
            }
            if(checkArrs[index] == undefined )
                checkArrs.push(arr)
        }
    }
    // 移除勾选中的数据
    function  closeTableCheck(index,row){
        if(row == null ){
            checkArrs[index]=[]
            return false;
        }
        checkArrs[index].splice(checkArrs[index].indexOf(row.id),1);
    }
    // 文件夹选择
    function  onSelect(item){
        checkArrs[fileIndex]=[];
        filePathName = item.value;
        if(filePathName == undefined || filePathName == ''){
            $('#reportTable13').bootstrapTable('filterByFile', {});
        }else{
            $('#reportTable13').bootstrapTable('filterByFile', {filePath: filePathName});
        }
        var val = item.value;
        for (var i=0;i<fileData.length;i++){
            var filePath = fileData[i].filePath.split("/");
            if(val == '' || (filePath[filePath.length-2] == val && filePath[filePath.length-1] == fileSourcePk)){
                checkArrs[fileIndex].push(fileData[i].id)
            }
        }
        // showFileData(fileSourcePk,fileTableName,fileIndex)

    }

    //预览
    function showPreview(filePath,nickname,fileName,fileSuffix) {
        var url ="";
        var str = filePath.split("/");
        if (nickname == null||nickname == "" || nickname == undefined){
             url = showFileUrl+getRequest()['table_name']+"/"+str[str.length-2]+"/"+str[str.length-1]+"/"+fileName;

        }else {
             url = showFileUrl+getRequest()['table_name']+"/"+str[str.length-2]+"/"+str[str.length-1]+"/"+nickname+fileSuffix;
        }
        console.log(url)
        // var jiaMi = Base64.encode(str);
        // console.log(jiaMi)
        window.open(previewShowFileUrl+'?url='+encodeURIComponent(Base64.encode(url)));

    };
    //上传文件弹窗
    function onUpload() {
        if($("#file")[0].files[0] === undefined || $("#file")[0].files[0] === null ){
            Qmsg.error({
                content:"请先选择文件上传！",
                timeout:5000
            })
            return false;
        }

        // 获取勾选的数据
        if(checkFun()[0].length <=0 ){
            Qmsg.error({
                content:"至少选择一条数据！",
                timeout:5000
            })
            $('#example').modal('hide')
            return false;
        }
        //显示模态框
        $('#example').modal('show')

        //清空内容
        $("#upload_check").html('')
        for (var i=0;i<fileNames.length;i++){
            var str = '<div class="form-check">';
            str += '<input type="radio" class="form-check-input" id="radio" name="optradio" value="'+fileNames[i]+'" >  '+fileNames[i];
            str +='<label class="form-check-label" for="radio1"></label>'
            $("#upload_check").append(str);
        }
    }

    //文件上传
    function onUploadFile() {

        if($(":radio:checked").length === 0){
            Qmsg.error({
                content:"请选择文件夹！",
                timeout:5000
            })
            $('#example').modal('hide')
            return ;
        }
        var newFileName = '';
        if($(":radio:checked").parent().parent().find('input').get(1) != undefined && $(":radio:checked").parent().parent().find('input').get(1).id === 'radioVal'){
            if($('#radioVal').val() === ''){
                Qmsg.error({
                    content:"请输入文件夹名称！",
                    timeout:5000
                })
                $('#example').modal('hide')
                return ;
            }
            newFileName = $('#radioVal').val();
        }else{
            newFileName = $(":radio:checked").val();
        }
        $('#upLogding').modal('show')
        //获取文件
        var files = $("#file")[0].files;
        var formData = new FormData();
        for(var i=0; i < files.length; i++){
            formData.append('file', files[i])
        }
        // formData.append("file",$("#file")[0].files[0]);
        formData.append("newFileName",newFileName);//文件夹名称
        formData.append("sourcePk",checkFun()[0]); //勾选数据中的编号
        formData.append("tableName",checkFun()[1]);//勾选数据中的表名
        formData.append("tableFileName",getRequest()['table_name']);//中文表名


        $.ajax({
            url:'/api/uploadFile',
            type:'post',
            data: formData,
            contentType: false,
            processData: false,
            success:function(res){
                $('#radioVal').val('')
                if(res.ok[0] ==='ok'){
                    //隐藏模态框
                    $('#example').modal('hide')
                    $('#upLogding').modal('hide')
                    $('#radioVal').val('')
                    Qmsg.success({
                        content:"文件上传成功",
                        timeout:5000
                    })
                }else{
                    $('#example').modal('hide')
                    $('#upLogding').modal('hide')
                    Qmsg.error({
                        content:"文件上传失败",
                        timeout:5000
                    })
                }

            },
            error:function () {
                $('#radioVal').val('')
                $('#example').modal('hide')
                $('#upLogding').modal('hide')
                Qmsg.error({
                    content:"错误",
                    timeout:5000
                })
            }
        })

    }

    //下载
    function onDownload() {
        fileList(getRequest()['source_pk'],table_name[tableNames.indexOf(getRequest()['table_name'])],"",true);

        if(checkArrs.length <= 0 && checkFun()[0].length<=0){
            Qmsg.error({
                content:"请勾选文件！",
                timeout:5000
            })
            return false
        }


        if(checkFun()[0].length > 0){
            fileDownloads();
            return  false;
        }

        var newArr = checkArrs.reduce(function(pre,curr,index,array){
            return pre.concat(curr);
        })
        if(newArr.length <= 0 && checkFun()[0]<=0){
            Qmsg.error({
                content:"请勾选文件！",
                timeout:5000
            })
            return false
        }
        window.location = dowFileUrl+"download?id="+repeatArr(newArr)+"&tableName="+getRequest()['table_name'];
        checkArrs = [];
    };
    // 主列表批量下载
    function fileDownloads(){
        $.ajax({
            url: "/api/selectAll",
            type: "get",
            data:{"sourcePk":getRequest()['source_pk'],"tableName":table_name[tableNames.indexOf(getRequest()['table_name'])],"filePathName":"","tableFileName":getRequest()['table_name']},
            // dataType: "json",
            success: function (res) {
                var jsonArr = jQuery.parseJSON(res);
                if(jsonArr.length <= 0 ){
                    Qmsg.error({
                        content:"当前记录无文件可下载！",
                        timeout:5000
                    })
                    return false
                }
                let id =[]
                for (const f in jsonArr) {
                    console.log("0"+jsonArr[f].id)
                    for(let i=0;i<checkFun()[0].length;i++){
                        if(checkFun()[0][i] == jsonArr[f].sourcePk){
                            id.push(jsonArr[f].id);
                        }
                    }
                }
                 window.location = dowFileUrl+"download?id="+id+"&tableName="+getRequest()['table_name'];
            },
            error:function (){
                Qmsg.error({
                    content:"错误！",
                    timeout:5000
                })
            }
        })
    }

    var onDownloadFile = function (id) {
        window.location = dowFileUrl+"downloadFile?id="+id;
    }

    var deleteFile = function (id) {

        $.ajax({
            url: "/api/deleteVbillstatuIds",
            type: "get",
            data:{"id":id},
            // dataType: "json",
            success: function (res) {
                $('#whiteContent').modal('hide');
                if(res.code != 200){
                    Qmsg.error({
                        content:res.message+"！",
                        timeout:5000
                    })
                    return false;
                }
                location.reload();
            },
            error:function (){
                Qmsg.error({
                    content:"错误！",
                    timeout:5000
                })
            }
        })


    }


    function repeatArr(arr){
        let newsArr = [];
        for (let i = 0; i < arr.length; i++) {
            if(newsArr.indexOf(arr[i]) === -1){
                newsArr.push(arr[i]);
            }
        }
        return newsArr;
    }
</script>


<div class="modal" tabindex="-1" id="whiteContent">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 800px;margin-left: -150px">
            <div class="modal-header">
                <h5 class="modal-title">查看文件
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </h5>
            </div>
            <div class="modal-body" id="showTableFile" style="height: 80%">
                <select id="selectLeo" class="form-control form-control-placeholder" onchange="onSelect(this)" style="width: 30%;margin-top:7px;position:fixed">
                </select>
                <table id="reportTable13" >
                </table>
            </div>
        </div>
    </div>
</div>

</body>
</html>
